<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="div01">
			<div id="div02">测试1</div>
			<div id="div03">测试1</div>
			<div id="div04">测试1</div>
		</div>
		<ul id="ul01">
			<li>香蕉</li>
			<li>西瓜</li>
			<li>葡萄</li>
			<li>苹果</li>
		</ul>
		<div>
			节点名字:<input type="text" id="txtNodeName" /><br />
			节点类型:<input type="text" id="txtNodeType" /><br />
			节点值:<input type="text" id="txtNodeValue" /><br />
			子节点数量:<input type="text" id="txtQty" /><br />
		</div>
		<button onclick="foo(1)">回到根节点</button>
		<button onclick="foo(2)">得到当前元素的第一个子元素</button>
		<button onclick="foo(3)">得到当前元素的最后一个子元素</button>
		<button onclick="foo(4)">得到当前元素的前一个兄弟元素</button>
		<button onclick="foo(5)">得到当前元素的后一个兄弟元素</button>
		<button onclick="foo(6)">得到当前元素的父元素</button>
		<script>
			var cur;
			var last;

			function foo(op) {
				last = cur;
				if (op == 1) {
					cur = document.documentElement;
				} else if (op == 2) {
					cur = cur.firstChild;
				} else if (op == 3) {
					cur = cur.lastChild;
				} else if (op == 4) {
					cur = cur.previousElementSibling;
				} else if (op == 5) {
					cur = cur.nextElementSibling;
				} else if (op == 6) {
					cur = cur.parentNode;
				}
				txtNodeName.value = cur.nodeName;
				txtNodeType.value = cur.nodeType;
				txtNodeValue.value = cur.nodeValue;
				txtQty.value = cur.childNodes.length;
				last.style.backgroundColor = "#ffffff";
				cur.style.backgroundColor = "#ff0000";
			}
		</script>

	</body>

</html>